<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="../../baseJS/Extjs/extjs4.2/resources/css/ext-all.css">
<script type="text/javascript"
	src="../../baseJS/Extjs/extjs4.2/ext-all-dev.js"></script>
<script type="text/javascript" src="Exporter.js"></script>
<script type="text/javascript" src="Base64.js"></script>
<script type="text/javascript" src="Button.js"></script>
<script type="text/javascript" src="Formatter.js"></script>
<script type="text/javascript" src="./excelFormatter/ExcelFormatter.js"></script>
<script type="text/javascript" src="./excelFormatter/Workbook.js"></script>
<script type="text/javascript" src="./excelFormatter/Worksheet.js"></script>
<script type="text/javascript" src="./excelFormatter/Cell.js"></script>
<script type="text/javascript" src="./excelFormatter/Style.js"></script>
<script type="text/javascript" src="Downloadify-master/js/swfobject.js"></script>
<script type="text/javascript" src="Downloadify-master/js/downloadify.min.js"></script>
<script type="text/javascript" src="Downloadify-master/media/downloadify.swf"></script>
</head>

<body>
	<div id="grid-example"></div>

	<script type="text/javascript">
		Ext.Loader.setConfig({
			enabled : true
		});
		Ext.Loader.setPath('Ext.ux', '../ux');

		Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*',
				'Ext.ux.exporter.*', 'Ext.ux.exporter.excelFormatter.*',
				'Ext.ux.exporter.csvFormatter.*' ]);

		Ext.onReady(function() {

					Ext.QuickTips.init();

					// setup the state provider, all state information will be saved to a cookie
					Ext.state.Manager.setProvider(Ext
							.create('Ext.state.CookieProvider'));

					// sample static data for the store
					var myData = [
							[ '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am' ],
							[ 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am' ],
							[ 'Altria Group Inc', 83.81, 0.28, 0.34,
									'9/1 12:00am' ],
							[ 'American Express Company', 52.55, 0.01, 0.02,
									'9/1 12:00am' ],
							[ 'American International Group, Inc.', 64.13,
									0.31, 0.49, '9/1 12:00am' ],
							[ 'AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am' ],
							[ 'Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am' ],
							[ 'Caterpillar Inc.', 67.27, 0.92, 1.39,
									'9/1 12:00am' ],
							[ 'Citigroup, Inc.', 49.37, 0.02, 0.04,
									'9/1 12:00am' ],
							[ 'E.I. du Pont de Nemours and Company', 40.48,
									0.51, 1.28, '9/1 12:00am' ],
							[ 'Exxon Mobil Corp', 68.1, -0.43, -0.64,
									'9/1 12:00am' ],
							[ 'General Electric Company', 34.14, -0.08, -0.23,
									'9/1 12:00am' ],
							[ 'General Motors Corporation', 30.27, 1.09, 3.74,
									'9/1 12:00am' ],
							[ 'Hewlett-Packard Co.', 36.53, -0.03, -0.08,
									'9/1 12:00am' ],
							[ 'Honeywell Intl Inc', 38.77, 0.05, 0.13,
									'9/1 12:00am' ],
							[ 'Intel Corporation', 19.88, 0.31, 1.58,
									'9/1 12:00am' ],
							[ 'International Business Machines', 81.41, 0.44,
									0.54, '9/1 12:00am' ],
							[ 'Johnson & Johnson', 64.72, 0.06, 0.09,
									'9/1 12:00am' ],
							[ 'JP Morgan & Chase & Co', 45.73, 0.07, 0.15,
									'9/1 12:00am' ],
							[ 'McDonald\'s Corporation', 36.76, 0.86, 2.40,
									'9/1 12:00am' ],
							[ 'Merck & Co., Inc.', 40.96, 0.41, 1.01,
									'9/1 12:00am' ],
							[ 'Microsoft Corporation', 25.84, 0.14, 0.54,
									'9/1 12:00am' ],
							[ 'Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am' ],
							[ 'The Coca-Cola Company', 45.07, 0.26, 0.58,
									'9/1 12:00am' ],
							[ 'The Home Depot, Inc.', 34.64, 0.35, 1.02,
									'9/1 12:00am' ],
							[ 'The Procter & Gamble Company', 61.91, 0.01,
									0.02, '9/1 12:00am' ],
							[ 'United Technologies Corporation', 63.26, 0.55,
									0.88, '9/1 12:00am' ],
							[ 'Verizon Communications', 35.57, 0.39, 1.11,
									'9/1 12:00am' ],
							[ 'Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63,
									'9/1 12:00am' ] ];

					/**
					 * Custom function used for column renderer
					 * @param {Object} val
					 */
					function change(val) {
						if (val > 0) {
							return '<span style="color:green;">' + val
									+ '</span>';
						} else if (val < 0) {
							return '<span style="color:red;">' + val
									+ '</span>';
						}
						return val;
					}

					/**
					 * Custom function used for column renderer
					 * @param {Object} val
					 */
					function pctChange(val) {
						if (val > 0) {
							return '<span style="color:green;">' + val
									+ '%</span>';
						} else if (val < 0) {
							return '<span style="color:red;">' + val
									+ '%</span>';
						}
						return val;
					}

					// create a business model
					Ext.define('Business', {
						extend : 'Ext.data.Model',
						fields : [ {
							name : 'company'
						}, {
							name : 'price',
							type : 'float'
						}, {
							name : 'change',
							type : 'float'
						}, {
							name : 'pctChange',
							type : 'float'
						}, {
							name : 'lastChange',
							type : 'date',
							dateFormat : 'n/j h:ia'
						} ]
					});

					// create the data store
					var myStore = Ext.create('Ext.data.ArrayStore', {
						model : 'Business',
						data : myData
});

// create the Grid object
var grid = Ext.create('Ext.grid.Panel', {
																																												title  : 'Array Grid',
										renderTo : 'grid-example',
										height : 350,
										width : 600,
										store : myStore,
										stateful : true,
										stateId : 'stateGrid',
										columns : [
												{
													text : 'Company',
													flex : 1,
													sortable : false,
													dataIndex : 'company'
												},
												{
													text : 'Price',
													width : 75,
													sortable : true,
													renderer : 'usMoney',
													dataIndex : 'price'
												},
												{
													text : 'Change',
													width : 75,
													sortable : true,
													renderer : change,
													dataIndex : 'change'
												},
												{
													text : '% Change',
													width : 75,
													sortable : true,
													renderer : pctChange,
													dataIndex: 'pctChange'
},
{
													text : 'Last Updated',
													width : 85,
													sortable : true,
													renderer : Ext.util.Format
															.dateRenderer('m/d/Y'),
													dataIndex : 'lastChange'
},
{
													xtype : 'actioncolumn',
													width : 50,
													items: [
{
																icon : '../../project/progressBar/images/open.gif', // Use a URL in the icon config
																tooltip : 'Sell stock',
																handler : function(
																		grid,
																		rowIndex,
																		colIndex) {
																	var rec = myStore
																			.getAt(rowIndex);
																	alert("Sell "
																			+ rec
																					.get('company'));
																}
},
{
																getClass : function(
																		v,
																		meta,
																		rec) { // Or return a class from a function
																	if (rec
																			.get('change') < 0) {
																		this.items[1].tooltip = 'Hold stock';
																		return 'alert-col';
																	} else {
																		this.items[1].tooltip = 'Buy stock';
																		return 'buy-col';
																	}
																},
																handler : function(
																		grid,
																		rowIndex,
																		colIndex) {
																	var rec = myStore
																			.getAt(rowIndex);
																	alert((rec
																			.get('change') < 0 ? "Hold "
																			: "Buy ")
																			+ rec
																					.get('company'));
																}
															} ]
												} ],
										viewConfig : {
											stripeRows : true
										},
										dockedItems : [ {
											xtype : 'toolbar',
											dock : 'bottom',
											items : [ {
												xtype : 'exporterbutton'
											} ]
										} ]
									});

				});
	</script>

</body>
</html>